<!DOCTYPE html> 
<html> 
    <head> 
        <style type="text/css">
            body{color:#333; font-family: "Microsoft YaHei","微软雅黑",Arial,Helvetica,sans-serif; background: #f6f6f6;}
            ul,li,p,button,table,tr,td{ margin: 0; padding: 0; font-family: "Microsoft YaHei","微软雅黑",Arial,Helvetica,sans-serif;}
            li{ list-style: none;}

            #citySelector{ overflow:hidden; width: 100%; height: 86%; position: absolute; left: 0; top: 0; box-sizing:border-box; padding: 20px;}
            #citySelector li{ float: left; border:1px solid #ddd; border-radius: 3px; width: 31%; margin: 0 1%; height: 100%; overflow: auto; background: #FFF; box-sizing:border-box; padding: 5px;}
            #citySelector li table{ width: 100%;}
            #citySelector li table td{ padding: 4px; cursor: pointer; border-bottom: 1px solid #f9f9f9;}
            .btns_wrap{ text-align:center; padding-top:15px; border-top:1px solid #ddd; position: absolute; width: 100%; left: 0; top: 87%;}
            .btns_wrap .btn{border:1px solid #ddd; color:#454545; background:#fff; padding:8px 15px; border-radius:5px; margin:0 5px; box-sizing:border-box; cursor:pointer; font-size: 1.1em;}
            .btns_wrap .btn:active{background:#cc293b; color:#FFF;}
        </style>
        <meta charset="utf-8" /> 
        <script type="text/javascript" src="../script/jquery/jquery_1.9.1.js"></script>
    </head> 
    <body>
        <ul id = "citySelector">
            <li class="provincetable_div">
                <table id="province_t"></table>
            </li>
            <li class="citytable_div">
                <table id="city_t"></table>
            </li>
            <li class="district_div">
                <table id="district_t"></table>
            </li>
        </ul>
        <p class="btns_wrap">
            <button class="btn" id="btn_cancel" ng-click="cancel()">取消</button>
            <button class="btn" id="btn_confirm" ng-click="confirm();">确认</button>
        </p>
    </body> 
    <script type="text/javascript">
        var china = require('china-province-city-district');
        //console.log(china)
        var g_prov = "";
        var g_city = "";
        var g_dist = "";
        var province = china.query();
        var city = china.query("北京市");
        var district = china.query(city[0]);
        function init() {
            g_prov = "北京市";
            g_city = city[0];
            fillProvince(province);
            fillCity(city);
            fillDistrint(district);
            addMousedownPro(document.getElementById('province_t'));
            addMousedownPro(document.getElementById('city_t'));
            addMousedownPro(document.getElementById('district_t'));
        }

        function addMousedownPro(obj) {
            var trs = obj.getElementsByTagName('tr');
            if (typeof trs[0] != 'undefined') {
                trs[0].style.backgroundColor = '#027676';
                trs[0].style.color = '#FFF';
            }
            obj.onmousedown = function (evt) {
                var ele = evt.srcElement;
                var index = ele.parentNode.rowIndex;
                for (var o = 0; o < trs.length; o++) {
                    if (o == index) {
                        trs[o].style.backgroundColor = '#027676';
                        trs[o].style.color = '#FFF';
                    } else {
                        trs[o].style.backgroundColor = '';
                        trs[o].style.color = '#333';
                    }
                }
            }
        }

        function getProv(obj) {
            g_prov = $(obj).html();
            city = china.query(g_prov);
            g_city = city[0];
            district = china.query(city[0]);
            g_dist = district[0];
            $("#city_t").html("");
            $("#district_t").html("");
            fillCity(city);
            fillDistrint(district);
        }

        function getCity(obj) {
            g_city = $(obj).html();
            district = china.query(g_city);
            g_dist = district[0];
            $("#district_t").html("");
            fillDistrint(district);
        }

        function getDist(obj) {
            g_dist = $(obj).html();
        }

        function fillProvince(prov) {
            if (prov.length) {
                for (var i = 0; i < prov.length; i++)
                {
                    var $tr = $("<tr><td onclick='getProv(this)'>" + prov[i] + "</td></tr>");
                    $tr.appendTo("#province_t");
                }
            }
        }

        function fillCity(city) {
            if (city.length) {
                for (var j = 0; j < city.length; j++)
                {
                    var $tr = $("<tr><td onclick='getCity(this)'>" + city[j] + "</td></tr>");
                    $tr.appendTo("#city_t");
                }
                var ele = document.getElementById('city_t');
                ele.getElementsByTagName('tr')[0].style.backgroundColor = '#027676';
                ele.getElementsByTagName('tr')[0].style.color = '#FFF';
            }
        }

        function fillDistrint(district) {
            if (district.length) {
                for (var k = 0; k < district.length; k++)
                {
                    var $tr = $("<tr><td onclick='getDist(this)'>" + district[k] + "</td></tr>");
                    $tr.appendTo("#district_t");
                }
                var ele = document.getElementById('district_t');
                ele.getElementsByTagName('tr')[0].style.backgroundColor = '#027676';
                ele.getElementsByTagName('tr')[0].style.color = '#FFF';
            }
        }
        init();
        //点击确认时向父页面发送消息
        document.getElementById('btn_confirm').onclick = function () {
            if(g_dist == undefined || g_dist == ''){
                g_dist = g_city;
                g_city = g_prov;
            }
            
            window.opener.postMessage({
                'type': 'city',
                'data': {
                    'province': g_prov,
                    'city': g_city,
                    'county': g_dist
                }
            }, '*');
            window.close();
        }
        //点击关闭按钮时关闭本窗口
        document.getElementById('btn_cancel').onclick = function () {
            window.close();
        }
    </script>
</html> 